<template>
  <div>
    <el-row class="row-basic">
      <el-card class="box-card" shadow="never">
        <el-row>
          <el-col>
            <h2>{{roleData.name}}</h2>
          </el-col>
          <el-col>
            <el-col :span="12">
              <el-row>代码：{{roleData.enname}}</el-row>
              <el-row>备注：{{roleData.remarks}}</el-row>
            </el-col>
            <el-col :span="12">
              <el-row>名称：{{roleData.name}}</el-row>
            </el-col>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
    <el-row>
      <el-tabs v-model="activeName">
        <el-tab-pane label="用户列表" name="user">
          <el-row>
            <h2>用户列表</h2>
            <el-table
              :data="userList"
              style="width: 100%">
              <el-table-column label="序号" type="index"></el-table-column>
              <el-table-column label="名称" prop="name"></el-table-column>
              <el-table-column label="工号" prop="no"></el-table-column>
              <el-table-column label="登录名" prop="loginName"></el-table-column>
              <el-table-column label="邮箱" prop="email"></el-table-column>
              <el-table-column label="电话" prop="phone"></el-table-column>
              <el-table-column label="手机" prop="mobile"></el-table-column>
            </el-table>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="功能权限" name="menu">
          <el-row>
            <h2>功能权限列表</h2>
            <el-table
              :data="menuList"
              border
              style="width: 100%;"
            >
              <el-table-column
                type="index"
                header-align="center"
                align="center"
                width="80"
                label="序号"
              >
              </el-table-column>
              <table-tree-column
                prop="name"
                header-align="center"
                treeKey="id"
                width="150"
                label="名称">
              </table-tree-column>
              <el-table-column
                header-align="center"
                align="center"
                label="图标">
                <template slot-scope="scope">
                  <icon-svg :name="scope.row.icon || ''"></icon-svg>
                </template>
              </el-table-column>
              <el-table-column
                prop="sort"
                header-align="center"
                align="center"
                label="排序号">
              </el-table-column>
              <el-table-column
                prop="href"
                header-align="center"
                align="center"
                width="150"
                :show-overflow-tooltip="true"
                label="菜单URL">
              </el-table-column>
              <el-table-column
                prop="permission"
                header-align="center"
                align="center"
                width="150"
                :show-overflow-tooltip="true"
                label="授权标识">
              </el-table-column>
            </el-table>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="数据权限" name="dept">
          <el-row>
            <h2>数据权限列表</h2>
            <el-table
              :data="deptList"
              border
              style="width: 100%;"
            >
              <el-table-column
                type="index"
                header-align="center"
                align="center"
                width="80"
                label="序号"
              >
              </el-table-column>
              <table-tree-column
                prop="name"
                header-align="center"
                treeKey="id"
                width="150"
                label="名称">
              </table-tree-column>
              <el-table-column
                prop="sort"
                header-align="center"
                align="center"
                label="排序号">
              </el-table-column>
            </el-table>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-row>

  </div>

</template>

<script>
  import TableTreeColumn from '@/components/table-tree-column'
  import {treeDataTranslate} from '@/utils'

  export default {
    name: 'user-detail',
    components: {
      TableTreeColumn
    },
    data () {
      return {
        activeName: 'user',
        userList: [],
        menuList: [],
        deptList: [],
        roleData: {}
      }
    },
    methods: {
      init (id) {
        this.$http({
          url: this.$http.adornUrl('/sysRole/query/detail'),
          method: 'get',
          params: this.$http.adornParams({id: id})
        }).then(({data}) => {
          this.roleData = data
        }).then(() => {
          /**
           * 获取部门信息
           */
          this.$http({
            url: this.$http.adornUrl('/sysDept/selectDeptByRoleIdTree'),
            method: 'get',
            params: this.$http.adornParams({id: id})
          }).then(({data}) => {
            this.deptList = data
          })
          /**
           * 获取菜单信息
           */
          this.$http({
            url: this.$http.adornUrl('/sysRole/selectMenuByRoleIdTree'),
            method: 'get',
            params: this.$http.adornParams({id: id})
          }).then(({data}) => {
            this.menuList = data
          })

          /**
           * 获取用户角色信息
           */
          this.$http({
            url: this.$http.adornUrl('/sysDept/listUserByRoleId'),
            method: 'get',
            params: this.$http.adornParams({id: id})
          }).then(({data}) => {
            this.userList = data
          })
        })
      }
    },
    activated () {
      let id = this.$route.params.id || 0
      console.log(id)
      this.init(id)
    }
  }
</script>

<style scoped>
</style>
